<template>
  <Row>
    <Col span="24">
      <Select v-model="deptId" style="width:200px">
          <Option v-for="item in depts" :value="item.Id" :key="item.Id">{{ item.Name }}</Option>
      </Select>
    </Col>
    <Col span="24">
      <base-table :columns="column" :data="data" op ck @add="addHandler" @update="updateHandler" @delete="deleteHandler"
        @refresh="refresh" @set="setHandler"></base-table>
    </Col>
    <Modal v-model="modalFlag" title="专家组信息" @on-ok="asyncOK" @on-cancel="asyncCancel">
        <Form ref="form" :model="formItem" :rules="rules" label-position="left">
            <FormItem label="专家组名称" prop="Name">
                <Input type="text" v-model="formItem.Name" >
                </Input>
            </FormItem>
            <FormItem label="备注" prop="Remark">
                <Input type="textarea" v-model="formItem.Remark" ></Input>
            </FormItem>
        </Form>
      </Modal>
  </Row>
</template>

<script>
import BaseTable from '@c/table/table.vue';
export default {
  name: 'Professor',
  components: {
    BaseTable
  },
  data () {
    return {
      modalFlag: false,
      isAdd: true,
      data: [],
      depts: [],
      dept: '',
      deptId: '',
      formItem: {},
      column: [
        {
          title: '序号',
          type: 'index'
        },
        {
          title: '专家组名称',
          key: 'Name'
        },
        {
          title: '学院名称',
          key: 'DeptName'
        },
        {
          title: '单位名称',
          key: 'OrgName'
        },
        
       
        {
          title: '备注',
          key: 'Remark'
        }
      ],
      rules: {
        Name: [{ required: true, message: '请填写项目标题', trigger: 'blur' }],
        Remark: []
      }
    };
  },
  computed: {
    name () {
      return this.data;
    }
  },
  methods: {
    cleaerFormItem () {
      // for (var key in this.formItem) {
      //   delete this.formItem[key];
      // }
      this.formItem = {};
    },
    asyncOK () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isAdd) {
            this.formItem.OrgId = this.dept.OrgId;
            this.formItem.DeptId = this.dept.Id;
            this.formItem.OrgName = this.dept.OrgName;
            this.formItem.DeptName = this.dept.Name;
            this.$api.AddProfessorGroup(this.formItem).then(res => {
              this.$Message.success('操作成功');
              // this.$refs.form.resetFields();
              this.cleaerFormItem();
              this.refresh();
            }).catch(err => {
              if (err) {
                this.$Message.error(err, 4);
              }
            });
          } else {
            console.log('this.isAdd', this.isAdd);
            this.$api.UpdateProfessorGroup(this.formItem).then((res) => {
              this.$Message.success('操作成功');
              // this.$refs.form.resetFields();
              this.cleaerFormItem();
              this.refresh();
            }).catch((err) => {
              if (err) {
                this.$Message.error(err, 4);
              }
            });
          }
        }
      });
    },
    asyncCancel () {
      // console.log('asdfasf');
      // this.$refs.form.resetFields();
      this.cleaerFormItem();
    },
    getAllDepts () {
      this.$api.GetDept().then(
        res => {
          this.depts = res.Data.tabledata;
        },
        err => {
          if (err) {
            this.$Message.error(err, 4);
          }
        }
      );
    },
    getProfessorByDept (data) {
      this.$api
        .QueryGroupByDept(data)
        .then(res => {
          this.data = res.Data;
        })
        .catch(err => {
          if (err) {
            this.$Message.error(err, 4);
          }
        });
    },
    addHandler () {
      this.isAdd = true;
      this.modalFlag = true;
    },
    updateHandler (rows) {
      // console.log(rows);
      if (Array.isArray(rows) && rows.length === 1) {
        this.formItem = rows[0];
        this.isAdd = false;
        this.modalFlag = true;
      } else {
        this.$Message.warning('请选择一条数据操作！');
      }
    },
    deleteHandler (rows) {
      // DeleteListSequence
      if (Array.isArray(rows) && rows.length > 0) {
        this.$Modal.confirm({
          title: '操作确认',
          content: '删除后可能会影响其它功能使用，确认删除选中的数据吗？',
          onOk: () => {
            this.$api
              .DeleteProfessorGroupList(rows)
              .then(res => {
                this.$Message.success('操作成功！');
                this.refresh();
              })
              .catch(err => {
                if (err) {
                  this.$Message.error(err);
                }
              });
          }
        });
      } else {
        this.$Message.warning('请选择至少一条数据操作！');
      }
    },
    refresh () {
      this.getProfessorByDept(this.deptId);
    },
    setHandler (rows) {
      if (Array.isArray(rows) && rows.length === 1) {
        // this.formItem = rows[0];
        // this.isAdd = false;
        // this.modalFlag = true;
        this.$router.push({ name: '专家组配置', params: { group: rows[0] } });
      } else {
        this.$Message.warning('请选择一条数据操作！');
      }
    }
  },
  watch: {
    depts: function (newVal, oldVal) {
      if (Array.isArray(newVal) && newVal.length > 0) {
        this.deptId = newVal[0]['Id'];
        this.dept = newVal[0];
      }
    },
    deptId: function (newVal, oldVal) {
      let depts = this.depts;
      for (let i = 0; i < depts.length; i++) {
        if (depts[i]['Id'] === newVal) {
          this.dept = depts[i];
        }
      }
      this.getProfessorByDept(newVal);
    }
  },
  mounted () {
    this.getAllDepts();
  }
};
</script>

<style scoped>
</style>